<!DOCTYPE html>
<html>

<head lang="en">
    <title>骡窝日报</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/news.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {

            //--------------------------------------------------------------------------------
            //app分页-------------------------------------------------------------------
            //分页临时变量
            var currentPage = 1;
            //因为下意识,jrender解析数据会见上一页数据丢失
            var dataList = [];//分页缓存的数据
            var totalPage = 1;//总页数
            //分页
            function query() {
                //获取用户游记列表
                $.get("/dailyCommends", {currentPage: currentPage, pageSize: 8}, function (data) {
                    //保存当前页数据
                    //merge合并2个数组,返回合并后的数据
                    $.merge(dataList, data.list)
                    //jrender渲染数据需要{list:[xx,xxx]}
                    $(".news").renderValues({list: dataList}, {
                        //render-fun中的值,表示渲染,执行该函数,配对出现的:render-key:表示函数的参数
                        setHref: function (item, value) {
                            var href = $(item).data("href");
                            $(item).attr("data-id", value);
                            $(item).attr("href", href + value);

                        }

                    });
                    currentPage += 1;//下一页
                    totalPage = data.pages;//总页数
                });
            }

            //第一页显示:
            query();
            //屏幕滚动事件
            $(window).scroll(function () {
                //console.log($(window).height()+ $(document).scrollTop() + "-----" + $(document).height());//屏幕高度
                //滚动高度
                //文档高度
                //触发翻页:屏幕高度 + 滚动高度 >= 文档高度

                if ($(window).height() + $(document).scrollTop() + 9 >= $(document).height()) {
                    //限制:当前页大于总页数时,不需要翻页
                    if (currentPage <= totalPage) {
                        //下一页数据
                        query();
                    } else {
                        //已经到最后一页
                        $(document).dialog({
                            type: 'notice',
                            infoText: '到底了...',
                            autoClose: 2500,
                            position: 'botton'//center:居中;botton :底部
                        });
                    }
                }
            });
        });
    </script>
    <script>
        $(function () {
            var dailyId;
            //收藏操作:===========================周文才===========================================
            var user = JSON.parse(sessionStorage.getItem("user"));
            $(".row").on("click", ".collectBtn", function () {
                dailyId = $(this).parent().next().data('id');
                //判断是否是用户登录
                if (!user) {
                    window.location.href = "/login.html";
                } else {
                    var userId = user.id;
                    if ($(this).find('i').data('status') == 0) {
                        $(this).find('i').css("color", "red");
                        $(this).find('i').data('status', 1);
                        $.post("/collects/dailys", {userId: userId, dailyId: dailyId, status: 1}, function (data) {
                            if (data.success) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '收藏成功'
                                });
                            }
                        })
                    } else if ($(this).find('i').data('status') == 1) {
                        var userId = user.id;
                        $(this).find('i').css("color", "black");
                        $(this).find('i').data('status', 0);
                        $.ajax({
                            url: '/collects/dailys',
                            type: 'DELETE',
                            data: {userId: userId, dailyId: dailyId, status: 0},
                            dataType: 'json',
                            success: function (data) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '取消收藏成功'
                                });
                            }
                        })
                    }
                }
            })
        })
    </script>
</head>

<body>


<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索资讯">
            </div>
        </div>
    </div>
</div>

<div class="container news">

    <div class="news">
        <h6 class="news-title">骡窝日报 </h6>
        <div class="row" render-loop="list">
            <div class="col-6">
                <a data-href="newsContent.html?id=" render-fun="setHref" render-key="list.id" data-dailyId>
                    <img class="rounded" width="100%" height="110px" render-src="list.coverUrl">
                </a>
                <div class="caption">
                    <p>
                        <span class="collectBtn">
                            <i class="fa fa-heart-o" data-status="0"></i>
                        </span>
                    </p>
                    <a class="heart" data-href="newsContent.html?id=" data-id render-fun="setHref" render-key="list.id">
                        <p render-html="list.title"></p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>